 

import React, { Component } from 'react'; 
import { Watermark, Breadcrumb, Layout, Menu, theme} from 'antd';
import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';

const { Header, Content, Footer, Sider } = Layout;
const items1 = ['1', '2', '3'].map((key) => ({
  key,
  label: `nav ${key}`,
}));
const items2 = [UserOutlined, LaptopOutlined, NotificationOutlined].map((icon, index) => {
  const key = String(index + 1);
  return {
    key: `sub${key}`,
    icon: React.createElement(icon),
    label: `subnav ${key}`,
    children: new Array(4).fill(null).map((_, j) => {
      const subKey = index * 4 + j + 1;
      return {
        key: subKey,
        label: `option${subKey}`,
      };
    }),
  };
});
  

const { SubMenu } = Menu;
const currentDate = new Date();

    // 获取当前时间的小时、分钟和秒
    const currentHour = currentDate.getHours();
    const currentMinute = currentDate.getMinutes();
    const currentSecond = currentDate.getSeconds();

    // 获取当前时间的年、月、日
    const currentYear = currentDate.getFullYear();
    const currentMonth = currentDate.getMonth() + 1; // 月份从 0 开始，所以要加 1
    const currentDay = currentDate.getDate();

    // 格式化当前时间
    const formattedTime = `${currentYear}-${currentMonth}-${currentDay} ${currentHour}:${currentMinute}:${currentSecond}`;

    console.log(formattedTime); // 输出格式化后的当前时间
    // this.setState({
    //   nowDate: formattedTime,
    // });

class Product extends Component {
  constructor(props) {
    super(props);
    this.state = {
      colorBgContainer:"",
      borderRadiusLG:"",
      nowDate:"",
      username:"Huaibin Zhang"
    };
  }
  componentDidMount(){
    
  } 
 
  render() {
    const { username,colorBgContainer, borderRadiusLG} = this.state 
    return (
      <div>
        <Watermark content={[username, formattedTime]}  >
        <Layout style={{height:800}}>
          <Header
            style={{
              display: 'flex',
              alignItems: 'center',
            }}
          >
            <div className="demo-logo" />
            <Menu
              theme="dark"
              mode="horizontal"
              defaultSelectedKeys={['2']}
              items={items1}
              style={{
                flex: 1,
                minWidth: 0,
              }}
            />
          </Header>
          <Content
            style={{
              padding: '0 48px',
            }}
          >
            <Breadcrumb
              style={{
                margin: '16px 0',
              }}
            >
              <Breadcrumb.Item>Home</Breadcrumb.Item>
              <Breadcrumb.Item>List</Breadcrumb.Item>
              <Breadcrumb.Item>App</Breadcrumb.Item>
            </Breadcrumb>
            <Layout
              style={{
                padding: '24px 0',
                background: colorBgContainer,
                borderRadius: borderRadiusLG,
              }}
            >
              <Sider
                style={{
                  background: colorBgContainer,
                }}
                width={200}
              >
                <Menu
                  mode="inline"
                  defaultSelectedKeys={['1']}
                  defaultOpenKeys={['sub1']}
                  style={{
                    height: '100%',
                  }}
                  items={items2}
                />
              </Sider>
              <Content
                style={{
                  padding: '0 24px',
                  minHeight: 280,
                }}
              >
                Content
              </Content>
            </Layout>
          </Content>
          <Footer
            style={{
              textAlign: 'center',
            }}
          >
            Ant Design ©{new Date().getFullYear()} Created by Ant UED
          </Footer>
        </Layout>
        </Watermark>
      </div>
    );
  }
}
 
export default Product;

